{extend name="layout/plugin_layout" /}
{block name="title"}密码认证 - {$app.title}{/block}
{block name="main"}
<style>
    .password-panel {
        width: 32rem;
        max-width: 98vw;
    }
</style>

<div class="container mx-auto" id="app">
    <div class="card shadow-lg fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <div class="card-body password-panel">
            <div class="text-lg font-bold">请输入密码解锁</div>
            <div class="flex gap-2 flex-col mt-4 ">
                <div class="form-control">
                    <label class="cursor-pointer label">
                        <input type="text" placeholder="Type here" class="input input-bordered w-full"
                               v-model="password"/>
                    </label>
                </div>
                <button class="btn btn-primary btn-block" @click="submit">提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            password: '',
        },
        methods: {
            submit() {
                httpPost('{:plugin_api()}', {
                    password: this.password
                }).then(() => {
                    $message.success('认证成功').then(() => {
                        window.location.reload()
                    })
                })

            }
        }
    })
</script>
{/block}